<template>
  <view class="tool">
    <view class="tool-title c1 fs32 mt20">
      <view class="left">
        <image src="../../../static/images/home_icon_4.png" mode="widthFix" />
        <view class="fw600">数据看板</view>
      </view>
      <view class="tool-more" @click="toTool">
        <image class="databack" src="../../../static/images/dataicon.png" />
        <text class="all">全部 </text>
        <image class="datanext" src="../../../static/images/datanext.png" />
      </view>
    </view>
    <!-- 数量统计 -->
    <view class="order-nums">
      <view class="top">
        <view class="add-order-num">
          <!-- <text>新增订单数：</text> -->
          <image class="add-order-num_addorder" src="../../../static/images/addorder.png" />
          <text>{{ amount.orderCount || '-' }}</text>
          <text>单</text>
        </view>
        <view class="add-order-day">{{ dayjs(new Date()).format('YYYY-MM-DD') }} (今日)</view>
      </view>
      <view class="center">
        <view class="add-order-num">
          <text>短租订单：</text>
          <text>{{ shortOrder.today || '-' }}</text>
          <text>单</text>
        </view>
        <view class="other">
          <text class="text_1">较前一日：</text>
          <ve-icon v-if="shortOrder.addCount > 0" name="up" size="28" :style="'margin-top: -5rpx;color:' + shortOrder.addCount > 0 ? '#F9654E' : '#45B753'" />
          <ve-icon v-if="shortOrder.addCount < 0" name="down" size="28" :style="'margin-top: -5rpx;color:' + shortOrder.addCount > 0 ? '#F9654E' : '#45B753'" />
          <text class="text_2" :style="{ color: shortOrder.addCount > 0 ? '#F9654E' : '#45B753' }">{{ shortOrder.addCountnum || '-' }}单</text>
        </view>
      </view>
      <view class="line"></view>
      <view class="bottom">
        <view class="add-order-num">
          <text>长租订单：</text>
          <text>{{ czOrder.today || '-' }}</text>
          <text>单</text>
        </view>
        <view class="other">
          <text class="text_1">较前一日：</text>
          <ve-icon v-if="czOrder.addCount > 0" name="up" size="28" :style="'margin-top: -5rpx;color:' + czOrder.addCount > 0 ? '#F9654E' : '#45B753'" />
          <ve-icon v-if="czOrder.addCount < 0" name="down" size="28" :style="'margin-top: -5rpx;color:' + czOrder.addCount > 0 ? '#F9654E' : '#45B753'" />
          <text class="text_2" :style="{ color: czOrder.addCount > 0 ? '#F9654E' : '#45B753' }">{{ czOrder.addCountnum || '-' }}单</text>
        </view>
      </view>
    </view>
    <view class="tools">
      <view class="ve-card-header-border-line-content"></view>
      <carLinechart pagePath="pages/index/index" v-if="isInit" canvasId="carHire" :amount="info" :carLineTooltip="carLineTooltip" />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import dayjs from 'dayjs'
  import { databoardorderCount, databoardcarUseRate } from '@/api/home/databoard'
  import carLinechart from '../../databoard/chart/carLinechart.vue'
  import { userStore } from '@/stores'

  const list = ref<any[]>([])
  const getTool = async () => {}
  const toTool = () => {
    if (siteIdnum.value) {
      uni.navigateTo({ url: '/pages/databoard/index?siteId=' + siteIdnum.value + '&siteName=' + siteName.value })
    } else {
      uni.navigateTo({ url: '/pages/databoard/index' })
    }
  }
  const amount = ref({})
  const shortOrder = ref({})
  const czOrder = ref({})
  const renderIcon = () => {
    return '<ve-icon v-if="czOrder.addCount > 0" name="up" size="28" style="margin-top: -2rpx" />'
  }
  const siteName = ref('')
  const siteIdnum = ref('')
  const isInit = ref(false)
  const getData = (id, name) => {
    siteIdnum.value = id
    siteName.value = name
    databoardorderCount({
      siteId: id,
    }).then((res) => {
      if (res.code == 200) {
        amount.value = res.result
        shortOrder.value = res.result.shortOrder
        shortOrder.value.addCountnum = shortOrder.value.addCount < 0 ? shortOrder.value.addCount * -1 : shortOrder.value.addCount
        czOrder.value = res.result.czOrder
        czOrder.value.addCountnum = czOrder.value.addCount < 0 ? czOrder.value.addCount * -1 : czOrder.value.addCount
        isInit.value = true
      }
    })
  }
  const carLineTooltip = ref({
    name: '车辆出租率变化(前3日-后3日)',
  })
  let info = ref([])
  const getchartData = (id) => {
    databoardcarUseRate({
      siteId: id,
      dayCount: 3,
    }).then((res) => {
      if (res.code == 200) {
        info.value = res.result
      }
    })
  }
  defineExpose({
    getData,
    getchartData,
  })
</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
  }
  .ml8 {
    margin-left: 8rpx;
  }
  .mb24 {
    margin-bottom: 24rpx;
  }
  .tool {
    margin: 24rpx 24rpx 0;
    background-color: #FFFFFF;
    box-shadow: 0 8rpx 20rpx 0 rgba(128, 128, 128, 0.05);
    border-radius: 8rpx;
    .tool-title {
      padding: 18rpx 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        image{
          width: 40rpx;
          height: 40rpx;
          margin-right: 16rpx;
        }
      }
      .tool-more {
        width: 156rpx;
        height: 56rpx;
        background-image: url('@/static/images/databack.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        display: flex;
        align-items: center;
        .all {
          margin: 0 16rpx 0 8rpx;
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
        .databack {
          margin-left: 16rpx;
          width: 26rpx;
          height: 28rpx;
        }
        .datanext {
          width: 10rpx;
          height: 18rpx;
        }
      }
    }
    .order-nums{
      height: 284rpx;
      display: flex;
      flex-direction: column;
      margin: 0 24rpx;
      border-radius: 8rpx;
      border: 1rpx solid #F2F3F7;
      // justify-content: space-between;
      .top{
        height: 84rpx;
        width: 100%;
        background-image: linear-gradient(to right, #FFD2C0, #FFE1C1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 24rpx;
        .add-order-num{
          margin-bottom: 16rpx;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          .add-order-num_addorder{
            width: 164rpx;
            height: 46rpx;
          }
          // text:nth-child(1){
          //   color: #191C27;
          //   font-size: 28rpx;
          //   font-weight: 400;
          // }
          text:nth-child(2){
            color: #B73C0E;
            font-size: 40rpx;
            font-weight: 700;
            line-height: 1;
          }
          text:nth-child(3){
            color: #191C27;
            font-size: 20rpx;
            font-weight: 400;
            margin-left: 8rpx;
          }
        }
        .add-order-day{
          color: #191C27;
          font-size: 28rpx;
          font-weight: 400;
        }
      }
      .center, .bottom{
        padding: 0 24rpx;
        height: 100rpx;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .add-order-num{
          text:nth-child(1){
            color: #191C27;
            font-size: 28rpx;
            font-weight: 400;
          }
          text:nth-child(2){
            color: #191C27;
            font-size: 40rpx;
            font-weight: 700;
          }
          text:nth-child(3){
            color: #8491A8;
            font-size: 20rpx;
            font-weight: 400;
            margin-left: 8rpx;
          }
        }
        .other{
          .text_1{
            color: #8491A8;
            font-size: 28rpx;
            font-weight: 400;
          }
          .text_2{
            font-size: 28rpx;
            font-weight: 400;
          }
        }

      }
      .line{
        width: calc(100% - 64rpx);
        margin-left: 32rpx;
        height: 2rpx;
        background-color: #F2F3F7;
        transform: scaleY(0.5);
      }
    }


    .tools {
      width: 100%;
      padding: 24rpx;
      .data-view {
        display: inline-block;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #8491a8;
        line-height: 28rpx;
      }
      .Order-view {
        font-size: 20rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #8491a8;
        line-height: 20rpx;
        margin: 16rpx 0;
        .add {
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #191c27;
          line-height: 28rpx;
        }
        .num {
          font-size: 40rpx;
          // font-family: D-DIN-Bold, D-DIN;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 700;
          color: #3072f6;
          line-height: 36rpx;
        }
      }
      .compre-order {
        padding: 32rpx;
        background: #f7f8fa;
        .width50 {
          display: inline-block;
          width: 50%;
        }
        .order-label {
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #191c27;
          line-height: 28rpx;
        }
        .order-num {
          font-size: 40rpx;
          // font-family: D-DIN-Bold, D-DIN;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 700;
          color: #191c27;
          line-height: 36rpx;
        }
        .unit {
          font-size: 20rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #8491a8;
        }
      }
    }
  }
  .ve-card-header-border-line-content {
    width: 100%;
    height: 2rpx;
    background-color: rgba(216, 216, 216, 0.3);
    margin: 4rpx 0 24rpx;
  }
  .mt20 {
    margin-top: 20rpx;
  }
  // 字体
  .font-din{
    // font-family: iconfontnum;
  }

</style>
